<template>
    <div>
        <div class="app-container">
            <div style="font-size: 18px;font-weight: 700;color: black">基础信息</div>
            <el-row >
                <el-col :span="11" :xs="24"  style="margin-top: 30px">
                    <div style="display: flex">
                        <div style="font-weight: 700;color: black">信息点名称</div>
                        <div style="margin-left: 20px">{{formData.sensorName}}</div>
                    </div>
                </el-col>
                <el-col :span="11" :xs="24"  style="margin-top: 30px">
                    <div style="display: flex">
                        <div style="font-weight: 700;color: black">站号</div>
                        <div style="margin-left: 20px">{{formData.siteNumber}}</div>
                    </div>
                </el-col>
                <el-col :span="11" style="margin-top: 30px" :xs="24">
                    <div style="display: flex">
                        <div style="font-weight: 700;color: black">数据位置</div>
                        <div style="margin-left: 20px">{{formData.position}}</div>
                    </div>
                </el-col>
                <el-col :span="11" style="margin-top: 30px" :xs="24">
                    <div style="display: flex">
                        <div style="font-weight: 700;color: black">当前数值</div>
                        <div style="margin-left: 20px">{{formData.sensorValue}}</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-divider></el-divider>
        <div style="font-size: 18px;font-weight: 700;color: black" class="app-container">历史数据</div>
        <el-form ref="form" :model="form" label-width="85px" size="small">
            <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker
                    v-model="form.beginTime"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    value-format="timestamp"
                    :clearable="false"
                    @change="changeDate"
                    >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="beginTime">
                <el-date-picker
                    v-model="form.endTime"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :clearable="false"
                    value-format="timestamp"
                    @change="changeDate"
                    >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="是否缩放">
                <el-radio v-model="form.resource" label="slider" @input="getSensorSingleData">是</el-radio>
                <el-radio v-model="form.resource" label="inside" @input="getSensorSingleData">否</el-radio>
            </el-form-item>
        </el-form>
        <div class="chart-wrapper">
            <LineChart title="历史数据" :chart-data="chartData" :xAxisData="echartsX" :is-slider="form.resource" :key="num"/>
        </div>
    </div>
</template>

<script>
import LineChart from '@/views/common/chart/LineChart'
import { getSensorHistorySingleData } from '@/api/biz/sensorHistoryData'

export default {
    components: { LineChart },
    props: {
        formData: {
            type: Object,
            default: () => {
            }
        },
        isEdit: {
            type: Boolean,
            default:false
        },
    },
    name: 'index',
    data() {
        return {
            // 表单参数
            form: {
                resource: 'slider',
                endTime:new Date().getTime(),
                beginTime:new Date().getTime()
            },
            // 信息点id:
            sensorId:0,
            num:0,
            chartData: [
                {
                    name: '',
                    data: []
                }
            ],
            echartsX: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
        }
    },
    methods: {
        // 获取曲线数据
        getSensorSingleData() {
            let obj ={
                sensorId:this.sensorId,
                beginTime:this.form.beginTime,
                endTime:this.form.endTime
            }
            getSensorHistorySingleData(obj).then(res=>{
                console.log('历史数据',res)
                this.chartData[0].name = res.data.sensorName
                if(res.data.echartsX.length>0){
                    this.echartsX = res.data.echartsX
                    this.chartData[0].data = res.data.data
                }else {
                    this.echartsX = [
                        '2020-10-01 10:00:00',
                        '2020-10-01 10:15:00',
                        '2020-10-01 10:30:00',
                        '2020-10-01 10:45:00',
                        '2020-10-01 11:00:00',
                        '2020-10-01 11:15:00',
                        '2020-10-01 11:30:00',
                        '2020-10-01 11:45:00',
                        '2020-10-01 12:00:00',
                        '2020-10-01 12:15:00'
                    ]
                    this.chartData = [
                        {
                            name: '模拟数据',
                            data: [
                                5, 7, 9, 8, 11, 15, 16, 4, 20, 13
                            ]
                        }
                    ]
                }
                this.num++
            })
        },
        changeDate() {
            this.getSensorSingleData()
        }
    },
    watch: {
        formData:{
            handler(newVal,oldVal){
                this.sensorId = newVal.sensorId
                if(!this.isEdit){
                    this.getSensorSingleData()
                }
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style scoped>

</style>
